<template>
  <div v-if="theme" :class="['theme', cname]">
    <!-- <h1 v-text="theme.title"></h1>
     -->
    <span>更多</span>
   	<div class="hd">
    	<span class="theme-text">{{theme.title}}</span>
    	<span class="text-tip">{{theme.
description}}</span>
    	<div @click="onMore(theme.type)" class="more">更多</div>
    </div>
    {{current}}
    <!-- 漫画的slider容器 -->
		<swiper @onTouchMove="onTouchMove" :options="options" ref="mySwiper">
			<swiper-slide v-for="(item, index) in theme.comics" :key="index">
				<comic @onTapComic="tapComic(item.title)" :comic="item"/>
			</swiper-slide>
		</swiper>
  </div>
</template>

<script>
import {swiper, swiperSlide} from 'vue-awesome-swiper'
import Comic from '../common/Comic.vue'
export default {
	components: {
    swiper,
    swiperSlide,
    Comic
  },
	props: {
		theme: {
			type: Object,
			default: null
		},
		cname: {
			type: String,
			default: ''
		},
	},
	data() {
		const self = this
		return {
			current: 0,
			newComic: Array(5).fill({
area: "大陆",
author: "羽墨动漫工作室",
category: "热血|玄幻|古风",
cid: 10462,

"description": "本想在战国当伪娘混口饭吃，谁知意外跌入洛水继承水神之力；身负水神宿命的他偏偏和火神后人成为了兄弟； 洛水救人妻，穿越护皇帝！黑暗势力的崛起，上古魔神再临，看杨朔如何利用神力挽救天下苍生，抱得美人归！",
image: "https://img001.yayxcc.com/images/cover/201904/1555211490TDxRj36TzMu5v04t.jpg",
title: "龙王觉醒"
      }),
			options: {
				slidesPerView: (window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth)/110,
				spaceBetween: 10,
				direction: 'horizontal',
        freeMode: true,
				initialSlide: 0,
				grabCursor: true,
				setWrapperSize: true,
				autoHeight: false,
				paginationClickable: true,
				mousewheelControl: true,
				observeParents: true,
				loadOnTransitionStart: true,
				lazy: {
			    loadPrevNext: true,
			    loadPrevNextAmount: 1,
			  },
			  on: {
			  	transitionStart: function(){
			  		self.current = this.activeIndex + 1
			    },
			  	reachEnd: function(){
			  		self.dosome()
			    },
			    progress: function(progress){
			      //self.onTouchMove(progress)
			    },
			  }
			}
		}
	},
  mounted() {

  },
  computed: {
    
  },
	methods: {
		onTouchMove: function(){     //手动滑动中触发
		},
		dosome() {
			
		},
		/*点击更多*/
		onMore(type) {
			
		},
		tapComic(cid) {
			console.log("点击了漫画 "+ cid)
		}

	}
}
</script>
<style lang="scss">
@import "~swiper/dist/css/swiper.css";
.theme {
	.hd {
		height: 40px;
		display: flex;
		flex-direction: row;
		align-items: baseline;
		padding: 8px 0;
		box-sizing: border-box;
		position: relative;
		.theme-text{
			font-size: 18px;
			color: #333;
			font-weight: 600;
		}
		.text-tip {
			margin-left: 8px;
			color: #999;
			font-size: 16px;
		}
		.more {
			position: absolute;
			bottom: 8px;
			right: 0;
			padding: 0 6px 1px 6px;
			border: 1px solid #999;
			color: #999;
			border-radius: 10px;
			font-size: 10px;
		}
	}
}
</style>
